<template>
    <div>
        {{ msg }}, {{ schoolName }}
        <Student></Student>
        <hr/>
        <!-- <School v-on:ccc="getSchoolName"></School> 绑定自定义事件: ccc -->
        <!-- <School @ccc="getSchoolName"></School> 绑定自定义事件: ccc , 简写@ccc -->
        <School ref="school" @click.native="show"></School>  <!-- 通过ref属性配合mounted实现绑定事件, native 表示原生js事件, 否则vue认为是自定义事件. -->
    </div>
</template>

<script>
    import Student from './components/Student.vue'
    import School from './components/School.vue'
    export default {
        name: 'App',
        components: {
            Student,
            School
        },
        data() {
            return {
                msg: 'Hello World!',
                schoolName: ''
            }
        },
        methods: {
            // getSchoolName(name, x, y, z) {
            getSchoolName(name, ...params) { // 通过...params获取所有参数
                console.log("App收到消息: "+name, params)
                this.schoolName = name
            },
            show() {
                alert('show')
            }
        },  
        mounted(){ // 当前组件挂载完毕后, 才能获取到子组件的ref, 所以在这里  绑定事件, 谁出发嘞ccc, 函数中this 就指向谁. 
            this.$refs.school.$on('ccc', this.getSchoolName)
            // this.$refs.school.$once('ccc', this.getSchoolName) // 限制只能执行一次
        }
    }
</script>

<!-- 全局样式 -->
<style scoped>

</style>